<template>
  <div class="fullpage">
    <div class="pos-test">
      <div class="dis-ib" @click="test1"></div>
      <div class="dis-ib" @click="test2"></div>
    </div>
    <realInfo ref="realInfo" class="realInfo"></realInfo>
    <mainTabs ref="mainTabs" @tab-change="changeMainChart"></mainTabs>
    <mainChart ref="mainChart" :height="mainChart.height"> </mainChart>
    <subChart
      v-for="(sub, k) in subCharts"
      :key="k"
      :height="sub.height"
      :ref="`chartID_${k}`"
      :_chartID="`chartID_${k}`"
      :_subType="sub.type"
    >
      <template v-slot:btn>
        <button class="subSelect" @click="showPicker = true">btn</button>
        <select v-model="sub.type" @change="changeFun(`chartID_${k}`)">
          <option
            v-for="(item, k) in options"
            :key="k"
            :value="item.value"
            :label="item.label"
            >{{ item.label }}</option
          >
        </select>
        <!-- <button type="button" @click="addSub()">+</button> -->
        <!-- <button type="button" @click="removeSub(k)">-</button> -->
      </template>
    </subChart>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="options"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>

    <!--  -->
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapGetters, mapMutations } from 'vuex';

import { getSupportedIndicators } from 'klinecharts';

export default {
  name: 'HelloWorld',
  components: {
    realInfo: () => {
      return import('@/Views/nowInfo.vue');
    },
    mainTabs: () => {
      return import('@/Views/mainTabs.vue');
    },
    mainChart: () => {
      return import('@/Views/mainChart.vue');
    },
    subChart: () => {
      return import('@/Views/subChart.vue');
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      stockCode: '',
      showPicker: false,
      mainChart: {
        height: 667,
      },
      subCharts: [
        {
          height: 120,
          type: getSupportedIndicators()[0],
        },
        {
          height: 120,
          type: getSupportedIndicators()[1],
        },
        {
          height: 120,
          type: getSupportedIndicators()[2],
        },
      ],
      options: (() => {
        let r = getSupportedIndicators().concat([
          '个股强度',
          '板块地利',
          '大盘天时',
        ]);
        return r.map((v) => {
          return { value: v, text: v };
        });
      })(),
    };
  },
  computed: {
    ...mapState(['winSize', 'stock']),
    ...mapGetters({}),
  },
  methods: {
    ...mapMutations({
      setKlineParmas: 'stock.setKlineParmas',
    }),
    test1: function() {
      console.log(this.$store.getters['stock/getValue']('code'));
      console.log(a);
    },
    test2: function() {
      console.log(this.$store.getters['stock/getValue']('klineParmas'));
    },
    test: function() {
      this.$store.dispatch('stock/fetchKLineData', null).then((res) => {
        this.$refs['mainChart'].applyNewData();
      });
    },
    changeMainChart: function(e) {
      // 主图类型切换，会影响后续主图副图变化
      this.ajaxData(e.value);
    },
    从可以传参的地方获取股票代码: function() {},
    formatData: function(item) {
      let obj = {};
      return obj;
    }, //目前无用
    ajaxData: function(params) {
      this.$store.dispatch('stock/fetchKLineData', params).then((res) => {
        this.$refs['mainChart'].applyNewData();
        this.resetSize();
      });
    },
    addSub: function() {
      if (this.subCharts.length > 2) {
        return;
      }
      let objDef = this._.cloneDeep(this.$options.data().subCharts[0]);
      this.subCharts.push(objDef);
      this.resetSize();
      this.$nextTick(() => {
        bus.$emit('resizeWindow');
      });
    },
    removeSub: function(k) {
      console.log(
        '%c [ k ]-118',
        'font-size:13px; background:pink; color:#bf2c9f;',
        this.subCharts
      );

      if (this.subCharts.length == 1) {
        return;
      }

      this.subCharts.splice(k, 1);
      this.resetSize();
      this.$nextTick(() => {
        bus.$emit('resizeWindow');
      });
    },
    resetSize: function() {
      let wh = window.innerHeight;
      let fixedHeight = [
        this.$refs['realInfo'].$el,
        this.$refs['mainTabs'].$el,
      ].reduce((t, v, i, a) => {
        t += v.offsetHeight;
        return t;
      }, 0);
      let subsHeight = this.subCharts.reduce((t, v, i, a) => {
        t += v.height;
        return t;
      }, fixedHeight);
      this.mainChart.height = wh - subsHeight;
      bus.$emit('resetSize');
    },
    changeFun: function(id) {
      this.$refs[id][0].ajaxData();
      return;
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.$store.commit('stock/getUrlArgs', { keyName: 'SC' });
    document.title = this.stock.klineParmas.prod_code;
    this.$nextTick(() => {
      this.$store.dispatch('stock/fetchRealData', {});
      this.resetSize();
    });

    this.$store
      .dispatch('stock/fetchKLineData', null)
      .then((res) => {
        this.resetSize();
      })
      .then(() => {
        this.$refs['mainChart'].applyNewData();
      });
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@vw100: 1080 /100;

.dis-flex-col {
  display: flex;
  flex-direction: column;
  .flexG1 {
    flex-grow: 1;
  }
  .flexG0 {
    flex-grow: 0;
    border-top: 1px solid #000;
  }
}
.fullpage {
  height: 100vh;
  .main {
  }
  .other {
  }
}
.AreaBar {
  height: 100%;
}
.subSelect {
  font-size: unit((32/10.8), vw);
  height: unit((40/10.8), vw);
  width: unit((140/10.8), vw);
  border: none;
  background-color: rgb(254, 238, 238);
  color: rgb(203, 110, 49);
}

.pos-test {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7;
  .dis-ib {
    width: 20px;
    height: 20px;
    &:nth-child(2n) {
      background-color: rgba(255, 0, 0, 0.5);
    }
    &:nth-child(2n + 1) {
      background-color: rgba(0, 255, 0, 0.5);
    }
  }
}
</style>
